<template>
  <div class="setting">
    <!-- 卡片结构 -->
    <el-card>
      <!-- tabs 结构 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="one" class="tabone">
          <!-- 新增角色 -->
          <el-button type="primary" size="mini" class="addbtn" @click="addRole"
            >+ 新增角色</el-button
          >
          <!-- 表格区域 -->
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column
              type="index"
              label="序号"
              width="150"
            ></el-table-column>
            <el-table-column prop="name" label="角色名" width="150">
            </el-table-column>
            <el-table-column prop="description" label="描述" width="600">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="openrole(scope.row.id)"
                  >分配权限</el-button
                >
                <el-button type="text" @click="openedit(scope.row)"
                  >修改</el-button
                >
                <el-button type="text" @click="del(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-pagination
            @size-change="sizechange"
            @current-change="currentchange"
            :current-page="page.currentPage"
            :page-sizes="page.pagesizes"
            :page-size="page.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="two" class="two">
          <!-- 公司表单 -->
          <el-form label-width="120px" style="margin-top:50px">
            <el-form-item label="公司名称">
              <el-input v-model="formData1.name" disabled style="width:400px" />
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input
                v-model="formData1.companyAddress"
                disabled
                style="width:400px"
              />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input
                v-model="formData1.mailbox"
                disabled
                style="width:400px"
              />
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                v-model="formData1.remarks"
                type="textarea"
                :rows="3"
                disabled
                style="width:400px"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog :title="titletou" :visible.sync="dialogshow">
      <el-form :model="formData" label-width="100px">
        <el-form-item label="角色名称">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="formData.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <setrole :roleShow.sync="roleShow" ref="setrole"></setrole>
  </div>
</template>

<script>
import setrole from './components/setrole.vue'
import {
  getRoleListApi,
  updateRoleAPi,
  addRoleAPi,
  deleteRoleApi,
  getCompanyApi
} from '../../api/setting'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      activeName: 'one',
      // 设置数据源：tableData
      tableData: [],
      page: {
        // 当前页
        currentPage: 1,
        // 页容量集合
        pagesizes: [1, 5, 10, 20, 30],
        // 页容量
        pagesize: 5,
        // 数据总条数据
        total: 30
      },
      formData: {
        name: '',
        description: ''
      },
      formData1: {
        name: '',
        companyAddress: '',
        mailbox: '',
        remarks: ''
      },
      // 控制显示隐藏
      dialogshow: false,
      titletou: '',
      // 控制分配权限显示
      roleShow: false
    }
  },
  methods: {
    async getRoleList () {
      const res = await getRoleListApi({
        page: this.page.currentPage,
        pagesize: this.page.pagesize
      })
      console.log(res)
      // 保存总数据
      this.page.total = res.total
      // 保存数据源
      this.tableData = res.rows
    },
    // 修改页容量
    sizechange (size) {
      this.page.pagesize = size
      this.getRoleList()
      console.log(size)
    },
    // 点击页码修改当前页
    currentchange (page) {
      this.page.currentPage = page
      this.getRoleList()
      console.log(page)
    },
    // 点击修改按钮
    openedit (obj) {
      console.log(obj)
      this.formData.name = obj.name
      this.formData.description = obj.description
      this.formData.id = obj.id
      this.dialogshow = true
      this.titletou = '编辑角色'
    },
    // 点击按钮判断编辑删除
    async submit () {
      if (this.formData.id) {
        await updateRoleAPi(this.formData)
        console.log('编辑')
      } else {
        // 新增角色
        console.log('新增')

        await addRoleAPi(this.formData)
      }
      this.getRoleList()
      this.$message({
        type: 'success',
        message: '操作成功'
      })
      this.dialogshow = false
      this.formData = {
        name: '',
        description: ''
      }
    },
    // 打开弹框
    addRole () {
      this.dialogshow = true
      this.titletou = '新增角色'
    },
    // 删除按钮
    async del (item) {
      try {
        await this.$confirm('是否删除')
        await deleteRoleApi(item.id)
        this.$message.success('删除成功')
        this.page.currentPage = 1
        await this.getRoleList()
      } catch {
        console.log('取消')
      }
    },
    // 获取公司信息
    async getCompany () {
      const res = await getCompanyApi(this.userInfoid)
      console.log(res)
      this.formData1 = res
    },
    // 打开分配权限
    async openrole (id) {
      this.roleShow = true
      await this.$refs.setrole.getRolePermission(id)
    }
  },
  created () {
    // 调用接口得到角色数据
    this.getRoleList()
    // 获取用户id
    this.getCompany()
  },
  computed: {
    ...mapGetters(['userInfoid'])
  },
  components: {
    setrole
  }
}
</script>

<style lang="scss" scoped`>
.setting {
  background-color: #f0f2f5;
  padding: 20px;
  .tabone {
    padding: 30px 20px;
    .addbtn {
      margin-bottom: 20px;
    }
    .el-pagination {
      text-align: center;
      margin-top: 30px;
    }
  }
  .two {
    padding: 20px 100px;
  }
}
</style>
